
import React, { useState, useEffect } from 'react'
import { Modal, Form, Tabs, Input, Button, Checkbox, Select, Row, Col, message, Spin } from 'antd';
import { setStore, getStore } from '@/utils/commons'
import API from '@/api/api'
import './index.scss';
const { TabPane } = Tabs;
const { Option } = Select;

function Forget(props) {
    const [load, setLoad] = useState(false)
    const [registerType, setRegisterType] = useState('phone')
    const [form] = Form.useForm();

    const tabChange = (e) => {
        setRegisterType(e)
        form.resetFields();
        form.setFieldsValue({ phoneArea: '86' })
    }

    const cancelModal = () => {
        props.close()
    }

    const toRegister = () => {
        props.toRegister()
    }

    const toLogin = () => {
        props.toLogin()
    }

    const onFinish = async (values) => {
        let opts = { password: values.password }
        if (registerType === 'phone') {
            opts.phone = values.phone
            opts.phoneArea = values.phoneArea
        } else {
            opts.email = values.email
        }

        setLoad(true)
        let res = await API.resetPassword(opts)
        try {
            if (res) {
                message.success('重置成功')
                setLoad(false)
                window.location.reload()
            } else {
                setLoad(false)
            }
        } catch (err) {
            setLoad(false)
        }
    };

    const prefixSelector = (
        <Form.Item name="prefix" noStyle>
            <Select style={{ width: 80 }} className="login-select">
                {
                    props.phoneAreaList && Object.values(props.phoneAreaList).map((value, index) => {
                        return <Option value={value.code} key={index}>+{value.code}</Option>
                    })
                }
            </Select>
        </Form.Item>
    );

    return (
        <Modal className="login" visible={props.status} onCancel={cancelModal} footer={null}>
            {
                !load ? null :
                    <div className="load-mark">
                        <Spin />
                    </div>
            }
            <Tabs defaultActiveKey="1" defaultActiveKey={registerType} size="large" onChange={tabChange}>
                <TabPane tab="手机重置" key="1">
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        initialValues={{
                            prefix: '86',
                        }}
                    >
                        <Form.Item name="phone" rules={[
                            { required: true, message: '请输入手机号码' },
                            { pattern: new RegExp(/^1(?:70\d|(?:9[89]|8[0-24-9]|7[135-8]|66|5[0-35-9])\d|3(?:4[0-8]|[0-35-9]\d))\d{7}$/), message: "输入手机号码格式有误" }
                        ]}>
                            <Input className="login-input" placeholder="请输入手机" addonBefore={prefixSelector} bordered={false} />
                        </Form.Item>
                        <Form.Item name="password" rules={[
                            { required: true, message: '请输入密码', },
                            { pattern: new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[A-Za-z0-9]{8,}$/i), message: "密码最低8位英文数字组成" }
                        ]}>
                            <Input.Password className="login-input" type="password" placeholder="请输入新密码" bordered={false} />
                        </Form.Item>
                        <Form.Item name="passwordRetype" rules={[
                            { required: true, message: '请再次输入密码' },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('两次输入的密码不一致'));
                                },
                            }),
                        ]}>
                            <Input.Password className="register-input" placeholder="再输入密码" bordered={false} />
                        </Form.Item>                        <Form.Item >
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>

                </TabPane>
                <TabPane tab="邮箱重置" key="2">
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >
                        <Form.Item name="mail" rules={[
                            { required: true, message: '请输入邮箱', },
                            { pattern: new RegExp(/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/), message: "邮箱格式有误" }
                        ]}>
                            <Input className="login-input" placeholder="请输入邮箱" bordered={false} />
                        </Form.Item>
                        <Form.Item name="password" rules={[
                            { required: true, message: '请输入密码', },
                            { pattern: new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[A-Za-z0-9]{8,}$/i), message: "密码最低8位英文数字组成" }
                        ]}>
                            <Input.Password className="login-input" type="password" placeholder="请输入新密码" bordered={false} />
                        </Form.Item>
                        <Form.Item name="passwordRetype" rules={[
                            { required: true, message: '请再次输入密码' },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('两次输入的密码不一致'));
                                },
                            }),
                        ]}>
                            <Input.Password className="register-input" placeholder="再输入密码" bordered={false} />
                        </Form.Item>
                        <Form.Item >
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </TabPane>
            </Tabs>
            <Row>
                <Col span={12}><a onClick={toLogin}>重置密码</a></Col>
                <Col span={12} style={{ textAlign: 'right' }}><a onClick={toRegister}>去注册</a></Col>
            </Row>
        </Modal>
    )
}

export default Forget